<template>
	<uni-popup ref="popup" :animation="false" type="bottom" :isMaskClick="1===0" :maskClick="1===0">
		<view class="popup-content">
			<view class="popup-content-main">
				<view class="picker__toolbar justify-between">
					<view class="picker__cancel" @click="cancel">取消</view>
					<!-- <view class="van-ellipsis picker__title">{{label}}</view> -->
					<view class="picker__confirm" @click="onConfirm">确认</view>
				</view>
				<scroll-view class="picker__content" scroll-y="true">
					<input class="uni-input bottom-line keyword-input" v-if="isSearch" v-model="searchKey"
						placeholder="输入关键字搜索" @input="search" />
					<view class="uni-list" v-if="multiple&&!isSearching">
						<custom-checkbox v-model="checkedAll" label="全选" @toggle="toggleAll" fontSize="36rpx"
							circleSize="scale(1.2)" :color="color" :circleColor="circleColor" />
					</view>
					<view class="uni-list" v-if="multiple">
						<template v-if="columnsData.length>0">
							<custom-checkbox v-model="item.checked" :label="item[option['label']]"
								@toggle="toggleIt($event,item,index)" v-for="(item,index) in columnsData" :key="index"
								:fontSize="labelFontSize" :circleSize="circleSize" :color="color"
								:circleColor="circleColor" />
						</template>
						<template v-else>
							<view class="no__data">{{noData}}</view>
						</template>
					</view>
					<view class="uni-list" v-else>
						<template v-if="columnsData.length>0">
							<custom-checkbox v-model="item.checked" :label="item[option['label']]"
								@toggle="toggleIt($event,item,index)" v-for="(item,index) in columnsData" :key="index"
								:fontSize="labelFontSize" :circleSize="circleSize" :color="color"
								:circleColor="circleColor" />
						</template>
						<template v-else>
							<view class="no__data">{{noData}}</view>
						</template>
					</view>
				</scroll-view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import CustomCheckbox from './CustomCheckbox.vue'
	export default {
		name: 'NiceuiPopupSelect',
		components: {
			CustomCheckbox
		},
		props: {
			columns: {
				type: Array,
				default: function() {
					return []
				}
			},
			selectValue: {
				type: Array,
				default: function() {
					return []
				}
			},
			option: {
				type: Object,
				default: function() {
					return {
						label: 'label',
						value: 'value'
					}
				}
			},
			//是否支持搜索
			isSearch: {
				type: Boolean,
				default: true
			},
			multiple: {
				type: Boolean,
				default: true
			},
			labelFontSize: {
				type: String,
				default: "32rpx"
			},
			color: {
				type: String,
				default: "#333"
			},
			circleSize: {
				type: String,
				default: "scale(1)"
			},
			circleColor: {
				type: String,
				default: "#004aff"
			}
		},
		data() {
			return {
				isSearching: false,
				searchKey: '',
				columnsData: [],
				checkedValue: [],
				checkedAll: false,
				tempValue: [],
				noData: '没有更多内容了',
				value: false
			}
		},
		methods: {
			getData(val) {
				const res = this.columnsData?.filter(item => {
					return val.indexOf(item[this.option.value]) > -1
				})
				return res
			},
			onConfirm() {
				this.tempValue = []
				this.searchKey = ''
				this.isSearching = false
				const ck = this.columnsData.filter(d => d.checked == true)
				const ks = ck.map(d => d[this.option.value])
				this.$emit('confirm', ks, this.getData(ks))
			},
			cancel() {
				this.tempValue = []
				this.searchKey = ''
				this.isSearching = false
				this.closePopup()
			},
			showPopup() {
				this.columnsData = JSON.parse(JSON.stringify(this.columns))
				this.columnsData.forEach(d => d.checked = false)
				this.checkedValue = JSON.parse(JSON.stringify(this.selectValue))
				if (this.checkedValue && this.checkedValue.length > 0) {
					this.columnsData.forEach(d => {
						if (this.checkedValue.includes(d[this.option.value])) {
							d.checked = true
						}
					})
					if (this.checkedValue.length != this.columnsData.length) {
						this.checkedAll = false
					} else {
						this.checkedAll = true
					}
				} else {
					this.checkedAll = false
				}
				this.$refs.popup.open()
			},
			closePopup() {
				this.$refs.popup.close()
			},
			toggleIt(v, item, index) {
				if (this.multiple) {
					item.checked = v
					this.$set(this.columnsData, index, item)
					if (!v) {
						this.checkedAll = false
					} else {
						const ck = this.columnsData.filter(d => d.checked == false)
						if (ck.length == 0) {
							this.checkedAll = true
						}
					}
				} else {
					this.columnsData.forEach(d => d.checked = false)
					item.checked = true
					this.$set(this.columnsData, index, item)
				}
				if (!v) {
					this.tempValue = this.tempValue.filter(tv => tv != item[this.option.value])
				} else {
					if (!this.tempValue.includes(item[this.option.value])) {
						this.tempValue.push(item[this.option.value]);
					}
				}
			},
			toggleAll(v) {
				this.checkedAll = v
				if (this.checkedAll) {
					this.columnsData.forEach(d => d.checked = true)
				} else {
					this.columnsData.forEach(d => d.checked = false)
				}
			},
			refreshTemp() {
				const ck = this.columnsData.filter(d => d.checked == true)
				const ks = ck.map(d => d[this.option.value])
				ks.forEach(k => {
					if (!this.tempValue.includes(k)) {
						this.tempValue.push(k);
					}
				})
			},
			search(val) {
				console.log('search-------val:', val)
				// #ifdef MP-WEIXIN
				// #endif
				val = val.detail.value //小程序取值

				if (val) {
					this.isSearching = true
					//先将勾选的临时存储
					this.refreshTemp();
					this.columnsData = this.columnsData.filter(item => {
						return item[this.option.label].indexOf(val) > -1
					})
				} else {
					this.isSearching = false
					this.columnsData = JSON.parse(JSON.stringify(this.columns))
					if (this.tempValue && this.tempValue.length > 0) {
						this.columnsData.forEach(d => {
							if (this.tempValue.includes(d[this.option.value])) {
								d.checked = true
							}
						})
						if (this.tempValue.length != this.columnsData.length) {
							this.checkedAll = false
						} else {
							this.checkedAll = true
						}
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	//结果弹窗
	::v-deep .close-view {
		height: 130rpx;

		image {
			width: 100rpx;
			height: 100rpx;
		}
	}
	
	::v-deep .uni-popup {
		z-index: 9999;
	}

	::v-deep .popup-content {
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		background-color: #fff;
		padding: 1rpx;
		width: 100vw;
		height: 900rpx;
		
		// height: 70vh;
		// overflow-y: scroll;
		.popup-content-main {
			margin: 50rpx auto 30rpx;

			.picker__toolbar {
				box-sizing: border-box;
				margin: 20rpx 32rpx;
				font-size: $uni-font-size-lg;
				display: flex;
				align-items: center;

				.picker__cancel {
					color: #969799;
				}

				.picker__confirm {
					color: #576b95;
				}

				.picker__title {
					font-size: 38rpx;
					color: #6f6f6f;
				}
			}

			.picker__content {
				max-height: 900rpx;
				overflow-y: auto;

				.keyword-input {
					font-size: 32rpx;
				}

				.check__all {
					box-sizing: border-box;
					margin: 20rpx 23rpx 20rpx 32rpx;
					padding: 20rpx 0rpx;
					border-bottom: solid 1rpx #f7f7f7;
					display: flex;
					justify-content: space-between;

					.check__all_left {
						color: #666;
						font-size: 32rpx;
					}

					.check__all_right {}
				}

				.uni-list {
					box-sizing: border-box;
					margin: 20rpx 32rpx;

					label {
						padding: 20rpx 0rpx;
						border-bottom: solid 1rpx #f7f7f7;
					}

					.uni-list-cell {
						.cell-label {
							font-size: 35rpx;
						}

						checkbox {
							//transform:scale(0.8,0.8)
						}
					}

					.no__data {
						color: #999;
						font-size: 30rpx;
						text-align: center;
						margin-top: 50rpx;
					}
				}
			}

		}
	}

	.bottom-line {
		border-bottom: solid 3rpx #eee;
		margin: 20rpx 32rpx;
		height: 72rpx;
	}
</style>